/**
 * 图形样式修改
 * @Author: zhangshubin
 * @Date: 2023-12-08 16:48:01
 * @Last Modified by: zhangshubin
 * @Last Modified time: 2023-12-21 18:17:14
 * */
import IconButton from '@/components/Icon'
import angleIcon from '@iconify/icons-radix-icons/angle'
import flipVerticalOutline from '@iconify/icons-teenyicons/flip-vertical-outline'
import flipHorizontalOutline from '@iconify/icons-teenyicons/flip-horizontal-outline'
import { Icon } from '@iconify/react'
import { Col, InputNumber, Row, Space } from 'antd'
import { PropsBarState } from '@/types/index'
import { mxCell } from 'mxgraph'
import { useEffect, useState } from 'react'
import EditorExecutor from '@/executor/EditorExecutor'

interface ILayoutSettingProps {
  cells?: mxCell[]
  cellState: PropsBarState
}
export default function LayoutSetting(props: ILayoutSettingProps) {
  const [X, setX] = useState<number>(0)
  const [Y, setY] = useState<number>(0)
  const [H, setH] = useState<number>(0)
  const [W, setW] = useState<number>(0)
  const [rotation, setRotation] = useState(0)

  useEffect(() => {
    const { x = 0, y = 0, height = 0, width = 0, style } = props.cellState
    setX(x as number)
    setY(y as number)
    setH(height as number)
    setW(width as number)
    if (style.rotation) {
      setRotation(parseInt(style.rotation))
    }
  }, [props.cellState])
  return (
    <Space direction="vertical" size="small" style={{ display: 'flex' }}>
      <Row>
        <Col span={10} className="label">
          布局
        </Col>
      </Row>
      <Row gutter={10}>
        <Col span={12}>
          <InputNumber
            prefix="W :"
            className="h-26px  w-100%  font-size-12px"
            formatter={(value) => `${value} pt`}
            parser={(value) => parseInt(value!.replace(' pt', ''))}
            value={W}
            onChange={(v) => {
              if (v != null) {
                setW(v)
              }
            }}
            onStep={(value) => {
              EditorExecutor.updateCellGeometry('width', value)
            }}
            onPressEnter={(e) => {
              EditorExecutor.updateCellGeometry('width', W)
            }}
          />
        </Col>
        <Col span={12}>
          <InputNumber
            prefix="H :"
            className="h-26px w-100% font-size-12px"
            formatter={(value) => `${value} pt`}
            parser={(value) => parseInt(value!.replace(' pt', ''))}
            value={H}
            onChange={(v) => {
              if (v != null) {
                setH(v)
              }
            }}
            onStep={(value) => {
              EditorExecutor.updateCellGeometry('height', value)
            }}
            onPressEnter={(e) => {
              EditorExecutor.updateCellGeometry('height', H)
            }}
          />
        </Col>
      </Row>
      <Row gutter={10}>
        <Col span={12}>
          <InputNumber
            prefix="X :"
            className="h-26px w-100% font-size-12px"
            formatter={(value) => `${value} pt`}
            parser={(value) => parseInt(value!.replace(' pt', ''))}
            value={X}
            onChange={(v) => {
              if (v != null) {
                setX(v)
              }
            }}
            onStep={(value) => {
              EditorExecutor.updateCellGeometry('x', value)
            }}
            onPressEnter={(e) => {
              EditorExecutor.updateCellGeometry('x', X)
            }}
          />
        </Col>
        <Col span={12}>
          <InputNumber
            prefix="Y :"
            className="h-26px w-100% font-size-12px"
            formatter={(value) => `${value} pt`}
            parser={(value) => parseInt(value!.replace(' pt', ''))}
            value={Y}
            onChange={(v) => {
              if (v != null) {
                setY(v)
              }
            }}
            onStep={(value) => {
              EditorExecutor.updateCellGeometry('y', value)
            }}
            onPressEnter={(e) => {
              EditorExecutor.updateCellGeometry('y', Y)
            }}
          />
        </Col>
      </Row>
      <Row gutter={10}>
        <Col span={16}>
          <InputNumber
            size="small"
            addonBefore={<Icon icon={angleIcon} />}
            className="h-26px w-100% font-size-12px"
            formatter={(value) => `${value}°`}
            parser={(value) => parseInt(value!.replace('°', ''))}
            value={rotation}
            onChange={(v) => {
              if (v != null) {
                setRotation(v)
              }
            }}
            onStep={(value) => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_ROTATION, value)
            }}
            onPressEnter={(e) => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_ROTATION, rotation)
            }}
          />
        </Col>
        <Col span={8}>
          <IconButton
            icon={flipHorizontalOutline}
            tip="垂直翻转"
            className="h-24px w-24px"
            fontSize={18}
            onClick={() => {
              EditorExecutor.toggleCellStyles(mxConstants.STYLE_FLIPV)
            }}
          />
          <IconButton
            icon={flipVerticalOutline}
            tip="水平翻转"
            className="h-24px w-24px"
            fontSize={18}
            onClick={() => {
              EditorExecutor.toggleCellStyles(mxConstants.STYLE_FLIPH)
            }}
          />
        </Col>
      </Row>
    </Space>
  )
}
